<template>
  <div class="box">
    <header class="header">
      <van-nav-bar title="购物车" left-arrow @click-left="$router.back()" />
    </header>
    <div class="content">
      <van-skeleton v-if="store.cartList.length==0">
        <template #template>
          <div :style="{ display: 'flex', width: '100%' }">
            <van-skeleton-image />
            <div :style="{ flex: 1, marginLeft: '16px' }">
              <van-skeleton-paragraph row-width="60%" />
              <van-skeleton-paragraph />
              <van-skeleton-paragraph />
              <van-skeleton-paragraph />
            </div>
          </div>
        </template>
      </van-skeleton>
      <van-pull-refresh v-else v-model="isLoading" success-text="刷新成功" @refresh="onRefresh">
        <van-swipe-cell v-for="item in store.cartList" :key="item.id">
          <van-card
            :num="item.count"
            :price="item.price"
            :title="item.title"
            class="goods-card"
            :thumb="item.image"
          >
            <template #tag>
              <van-checkbox v-model="item.checked"></van-checkbox>
            </template>
            <template #footer>
              <van-stepper v-model="item.count" />
            </template>
          </van-card>
          <template #right>
            <van-button
              square
              text="删除"
              type="danger"
              class="delete-button"
              @click="store.deleteItem(item.id)"
            />
          </template>
        </van-swipe-cell>
      </van-pull-refresh>
    </div>
    <footer>
      <van-submit-bar :price="store.totalPrice" button-text="提交订单" @submit="onSubmit">
        <van-checkbox v-model="allChecked">全选</van-checkbox>
      </van-submit-bar>
    </footer>
  </div>
</template>
<script setup>
import { useCounterStore } from "@/stores/counter";
import { computed, ref } from "vue";
const store = useCounterStore();
const allChecked = computed({
  get() {
    if (store.cartList.length == 0) {
      return false;
    } else {
      return store.cartList.every(item => item.checked);
    }
  },
  set(newValue) {
    store.cartList.forEach(item => (item.checked = newValue));
  }
});
const isLoading = ref(false);
const onRefresh = () => {
  isLoading.value = true;
  setTimeout(() => {
    isLoading.value = false;
  }, 1000);
};
</script>
<style lang='scss'>
.goods-card {
  margin: 0;
  background-color: white;
}

.delete-button {
  height: 100%;
}
</style>